<template>
  <div style="background:#BBE6F7;" class="details">
    <el-row style="background:#ccc;height:80px;line-height:80px;padding: 0px 0 10px 20px;">
        <el-radio-group v-model="tabIndex" @change="jumpInfo">
          <el-radio-button :label="1" name="1">预警详情</el-radio-button>
          <el-radio-button v-if="userPageAuth.carmileageconfig" :label="2" name="2">车辆里程预警配置</el-radio-button>
          <el-radio-button v-if="userPageAuth.cartimeconfig" :label="3" name="3">车辆时间预警配置</el-radio-button>
          <el-radio-button v-if="userPageAuth.personconfig" :label="4" name="4">人员预警配置</el-radio-button>
        </el-radio-group>
    </el-row>
    <el-row style="padding:10px 50px 30px">
      <el-col :span="24">
        <div style="margin: 20px 0 30px">
          <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="search">搜索</el-button>
          <el-button :disabled="!$store.getters.pageAuth.authoritySearch" size="mini" @click="reset">重置</el-button>
          <el-button :disabled="!$store.getters.pageAuth.authorityUpdate" size="mini" @click="save">保存</el-button>
          <el-button :disabled="!$store.getters.pageAuth.authorityDown" size="mini" @click="exceldownload">Excel下载</el-button>
        </div>
        <el-table
          :data="recordSearchObj"
          :border="true"
          :header-cell-style="{background:'#eef1f6',color:'#606266','text-align': 'center'}"
          class="customTableStyle"
          style="font-size:12px;">
          <el-table-column
            label="ID"
            min-width="80"
            type="index" />
          <el-table-column
            label="开始预警时间"
            min-width="150">
            <template slot-scope="scope">
              <el-date-picker
                v-model="ksyjsjstarttime"
                value-format="yyyy-M-d"
                type="date"
                size="mini"
                class="datePicker"
                placeholder="选择开始日期">
              </el-date-picker>
              <br />
              <el-date-picker
                v-model="ksyjsjendtime"
                value-format="yyyy-M-d"
                type="date"
                size="mini"
                class="datePicker"
                placeholder="选择结束日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="预警处理时间"
            min-width="150">
            <template slot-scope="scope">
              <!-- <el-input size="mini" v-model="scope.row.yjclsj" placeholder="请输入内容"></el-input> -->
              <!-- <el-date-picker
                size="mini"
                clearable
                v-model="scope.row.yjclsj"
                value-format="yyyy-M-d"
                type="daterange"
                class="datePicker"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker> -->
              <el-date-picker
                v-model="yjclsjstarttime"
                value-format="yyyy-M-d"
                type="date"
                size="mini"
                class="datePicker"
                placeholder="选择开始日期">
              </el-date-picker>
              <br />
              <el-date-picker
                v-model="yjclsjendtime"
                value-format="yyyy-M-d"
                type="date"
                size="mini"
                class="datePicker"
                placeholder="选择结束日期">
              </el-date-picker>
            </template>
          </el-table-column>
          <el-table-column
            label="预警处理人"
            min-width="110">
            <template slot-scope="scope">
              <el-select size="mini" filterable clearable v-model="scope.row.operator" placeholder="请选择">
                <el-option
                  v-for="item in warnPerson"
                  :key="item"
                  :label="item"
                  :value="item">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="预警车牌/姓名"
            min-width="110">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.yjcpxm" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="预警大类"
            min-width="110">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.yjdl" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="预警子类1"
            min-width="110">
            <template slot-scope="scope">
              <!-- <el-input size="mini" v-model="scope.row.yjzl1" placeholder="请输入内容"></el-input> -->
              <el-select size="mini" clearable v-model="scope.row.yjzl1" placeholder="请选择">
                <el-option label="时间" value="时间"></el-option>
                <el-option label="里程" value="里程"></el-option>
                <el-option label="证件" value="证件"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="预警子类2"
            min-width="110">
            <template slot-scope="scope">
              <!-- <el-input size="mini" v-model="scope.row.yjzl2" placeholder="请输入内容"></el-input> -->
              <el-select size="mini" clearable v-model="scope.row.yjzl2" placeholder="请选择">
                <el-option label="主车" value="主车"></el-option>
                <el-option label="挂车" value="挂车"></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="预警项目"
            min-width="180">
            <template slot-scope="scope">
              <!-- <el-input size="mini"  v-model="scope.row.yjxm" placeholder="请输入内容"></el-input> -->
              <el-select size="mini" clearable v-model="scope.row.yjxm" placeholder="请选择">
                  <el-option
                    v-for="item in yjxmList"
                    :key="item.id"
                    :label="item.yjxm"
                    :value="item.yjxm">
                  </el-option>
                </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="预警内容"
            min-width="180">
            <template slot-scope="scope">
              <el-input size="mini"  v-model="scope.row.yjnr" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
          <el-table-column
            label="预警状态"
            min-width="110">
            <template slot-scope="scope">
              <el-select size="mini" filterable clearable v-model="scope.row.yjzt" placeholder="请选择">
                <el-option
                  label="待处理"
                  value="待处理">
                </el-option>
                <el-option
                  label="已处理"
                  value="已处理">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="140">
            <template slot-scope="scope">
              <el-input size="mini" v-model="scope.row.bz" placeholder="请输入内容"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :total="page.totalCount"
          :page-size="page.pageSize"
          :current-page.sync="page.currPage"
          style="margin-top: 10px;"
          background
          layout="total, slot, prev, pager, next"
          @current-change="search"
          @size-change="handleSizeChange">
          <span>—&nbsp;&nbsp;&nbsp;共 {{page.totalPage}} 页</span>
        </el-pagination>
        <el-table
          :data="page.list"
          :border="true"
          :header-cell-style="{background:'#eef1f6',color:'#606266','text-align': 'center'}"
          highlight-current-row
          @row-click="rowClick"
          class="customTableStyle"
          :cell-style="tabrowstyle"
          style="font-size:12px;">
          <el-table-column
            type="index"
            label="ID"
            min-width="80"/>
          <el-table-column
            label="开始预警时间"
            min-width="150"
            prop="ksyjsj">
          </el-table-column>
          <el-table-column
            label="预警处理时间"
            min-width="150"
            prop="yjclsj">
          </el-table-column>
          <el-table-column
            label="预警处理人"
            min-width="110"
            prop="operator">
          </el-table-column>
          <el-table-column
            label="预警车牌/姓名"
            min-width="110"
            prop="yjcpxm">
          </el-table-column>
          <el-table-column
            label="预警大类"
            min-width="110"
            prop="yjdl">
          </el-table-column>
          <el-table-column
            label="预警子类1"
            min-width="110"
            prop="yjzl1">
          </el-table-column>
          <el-table-column
            label="预警子类2"
            min-width="110"
            prop="yjzl2">
          </el-table-column>
          <el-table-column
            label="预警项目"
            min-width="180"
            prop="yjxm">
          </el-table-column>
          <el-table-column
            label="预警内容"
            min-width="180"
            prop="yjnr">
          </el-table-column>
          <el-table-column
            label="预警状态"
            min-width="110">
            <template slot-scope="scope">
              <el-select @change="yjztchange(scope.row.id,scope.row.yjzt)" :disabled="scope.row.yjzt==yjztdisabled?true:false" size="mini" filterable clearable v-model="scope.row.yjzt" placeholder="请选择">
                <el-option
                  label="待处理"
                  value="0">
                </el-option>
                <el-option
                  label="已处理"
                  value="1">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column
            label="备注"
            min-width="140"
            prop="bz">
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import adapter from './adapter'
import {selectlistWarnTimeAndPerson,selectWarnProject} from "@/api/api"
export default {
  name: '',
  data() {
    return {
       ...adapter.data,
       tabIndex: 1, // tab序号
    }
  },
  computed: {
    ...adapter.computed,
  },
  mounted() {
    console.log(this.$route.params.yjzl)
    if(this.$route.params.yjzl != undefined){
      this.recordSearchObj[0].yjzl1 = this.$route.params.yjzl
      this.recordSearchObj[0].yjzt = "待处理"
      this.search()
    } else {
      this.initwarnDetailsList()
    }
    // console.log(this.userinfoname.username)
    //获取预警时间
    selectlistWarnTimeAndPerson().then((res)=>{
      // console.log(res)
      this.warnPerson = res.data.warnPerson
      this.warnTime = res.data.warnTime
    })
    //获取预警项目
    selectWarnProject().then((res)=>{
      console.log(res.data.list)
      this.yjxmList = res.data.list
    })
  },
  methods:{
    ...adapter.methods,
    jumpInfo(tabIndex) {
      console.log(tabIndex)
      if(tabIndex == 1){
        this.$router.push('details')
      }else if (tabIndex == 2) {
        this.$router.push('carmileageconfig')
      }else if(tabIndex ==3){
        this.$router.push('cartimeconfig')
      }else{
        this.$router.push('personconfig')
      }
    },
  },
 }
</script>
<style>
.details .el-date-editor.el-input.datePicker{
  width: 128px !important;
}
</style>
<style lang="scss" scope>
.car-detail-title{
  font-size: 30px;
  text-align: center;
}
.el-radio-button__inner{
  padding: 10px 20px;
}
</style>
